<template>
	<view class="content" :style="{paddingBottom: paddingBottom+'px'}">
		<!-- 搜索 -->
		<view class="search">
			<u-search placeholder="请输入要搜索的内容" :show-action="false" :showAction="false" :clearabled="true"
				bg-color="#fff" :disabled="true" @click="GoPopup">
			</u-search>
		</view>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" indicator-active-color="#fff" circular="true"
			class="banner">
			<swiper-item v-for="item in HomeList.banner" :key="item.id">
				<image :src="item.image_url"></image>
			</swiper-item>
		</swiper>

		<!-- 导航栏 -->
		<u-grid :border="true" col=5>
			<u-grid-item v-for="(item) in HomeList.channel" :key="item.id"
				:customStyle="{paddingTop:40+'rpx',paddingBottom:40+'rpx'}" bgColor="#fff"
				@click="ToChannelFn(item.id)">
				<image :src="item.icon_url" style="width: 8vw;" mode="widthFix">
				</image>
				<text class="grid-text">{{item.name}}</text>
			</u-grid-item>
		</u-grid>

		<!-- 品牌制造商直供 -->
		<view class="brandBox">
			<text class="brandtitle">品牌制造商直供</text>
			<view class="brandList">
				<!-- 列表的每一项 -->
				<view class="brandListItem" v-for="item in HomeList.brandList" wx:key="id">
					<image :src="item.pic_url" mode="widthFix"></image>
					<text class="txtOne">{{item.name}}</text>
					<view class="txtTow">￥ {{item.floor_price | handelPrice}} 元</view>
				</view>
			</view>
		</view>

		<!-- 新品首发 -->
		<view class="newGoodsListBox">
			<view class="newGoosTitle">周一周四 · 新品首发</view>
			<view class="newGoodsListItem">
				<view class="newGoodsImg" v-for="item in HomeList.newGoodsList" wx:key="id">
					<image :src="item.list_pic_url" class="newGoodsImgsty" mode="widthFix"></image>
					<view class="goodsmintitle">{{item.name}}</view>
					<view class="goodsmintitle goodsSprice">￥ {{item.retail_price | handelPrice}} 元</view>
				</view>
			</view>
		</view>

		<!-- 人气推荐 -->
		<view class="hotGoodsBox">
			<view class="hotGoodTilet">人气推荐</view>
			<view class="hotGoodInner">
				<view class="hotGoodItem" v-for="item in HomeList.hotGoodsList" :key="item.id">
					<image :src="item.list_pic_url" mode="" class="hotImgSty"></image>
					<view class="hgitemTxt">
						<view class="hgitemTxtTitle">
							{{item.name}}
						</view>
						<view class="hotGoodsMS">
							{{item.goods_brief}}
						</view>
						<view class="hotGoodsPrice">
							￥ {{item.retail_price | handelPrice}} 元
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 专题精选 -->
		<view class="topicBox">
			<view class="topicBoxTilet">专题精选</view>
			<view class="topicListBox">
				<view class="topicBoxItem" v-for="item in HomeList.topicList">
					<image :src="item.item_pic_url" mode="scaleToFill" style="height:600rpx ;height: 400rpx;"></image>
					<view class="topicBoxItemTitel">
						<text>{{item.title}}</text> <text class="topicPrice">￥ {{item.price_info | handelPrice}}
							元起</text>
					</view>
					<view class="topicMs">
						{{item.subtitle}}
					</view>
				</view>
			</view>
		</view>
		<!-- 分类商品 -->
		<classify :list="item.goodsList" :name="item.name" v-for="(item,index) in HomeList.categoryList" :key="index">
		</classify>
		<!-- 底部导航栏 -->
		<tobBar :current="0"></tobBar>
	</view>
</template>

<script>
	import request from "@/pages/request/request.js"
	export default {
		data() {
			return {
				keyword: '请输入要搜索的内容',
				HomeList: {},
				paddingBottom: 0,
			}
		},
		onLoad() {
			request({
				successCb: (res) => {
					this.HomeList = res
					console.log("首页res", this.HomeList);
				},
				failCb: (err) => {
					console.log(err);
				}
			})
			const app = getApp();
			const bottomFixedNeeded = app.globalData.bottomFixedNeeded;
			const bottomDistance = app.globalData.bottomDistance;
			if (bottomFixedNeeded) {
				this.$data.paddingBottom = 50 + bottomDistance;

			} else {
				this.$data.paddingBottom = 50;
			}
		},
		methods: {
			GoPopup() {
				uni.navigateTo({
					url: "../popup/popup"
				})
			},
			ToChannelFn(id) {
				uni.navigateTo({
					url: `/pages/channel/channel?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #efefef;
		padding-bottom: calc(var(--window-bottom) + 50px)
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.search {

		padding: 20rpx 24rpx;
	}

	.banner {
		width: 100vw;
		height: calc(400*100vw/750);
	}

	.banner image {
		width: 100%;
		height: 100%;
	}

	.navBox {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 172rpx;
		background-color: #fff;
	}

	.navItem {
		border-right: 1px solid #ccc;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		width: 156rpx;
		height: 172rpx;
	}

	.navItem image {
		display: block;
		width: 56rpx;
		height: 56rpx;
		margin-bottom: 10rpx;
	}

	.brandBox {
		margin: 40rpx 0;
	}

	.brandtitle {
		display: block;
		height: 100rpx;
		background-color: #fff;
		text-align: center;
		line-height: 100rpx;
		font-size: 36rpx;
	}

	.brandList {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		background-color: #fff;
	}

	.brandListItem {
		display: flex;
		flex-wrap: wrap;
		position: relative;
		margin-bottom: 5rpx;
	}

	.brandListItem image {
		width: calc(50vw - 8rpx);
	}

	.brandListItem .txtOne {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
	}

	.brandListItem .txtTow {
		position: absolute;
		top: 80rpx;
		left: 20rpx;
		color: #8b0000;
	}

	.newGoodsListBox {
		width: 100%;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.newGoosTitle {
		height: 100rpx;
		background-color: #fff;
		line-height: 100rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.newGoodsListItem {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
	}

	.newGoodsImg {
		width: calc(50vw);
		font-size: 28rpx;
		text-align: center;
	}

	.newGoodsImgsty {
		width: calc(50vw);
	}

	.goodsmintitle {
		/* width: 100%; */
		text-align: center;
	}

	.goodsSprice {
		margin-top: 10rpx;
		color: #8b0000;
	}

	.hotGoodsBox {
		width: 100%;
		background-color: #fff;
		margin-bottom: 40rpx;
		box-sizing: border-box;
		color: #323233;
	}

	.hotGoodTilet {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.hotGoodInner {
		width: 100%;
		overflow: hidden;
	}

	.hotGoodItem {
		background-color: #fafafa;
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-top: 16rpx;
		padding: 16rpx 32rpx;
	}

	.hotImgSty {
		width: 176rpx;
		height: 176rpx;
	}

	.hgitemTxt {
		flex: 1;
	}

	.hgitemTxtTitle {
		height: 58rpx;
		font-size: 36rpx;
	}

	.hotGoodsMS {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 24rpx;
	}

	.hotGoodsPrice {
		height: 40rpx;
		line-height: 40rpx;
		color: #8b0000;
		font-size: 24rpx;
	}

	.SpecialBox {
		width: 100%;
		height: 656rpx;
		padding-bottom: 20rpx;
		box-sizing: border-box;
		font-family: "黑体";
	}

	.SpecialImg {
		width: 100%;
		height: 416rpx;
	}

	.SpecialTitle {
		font-size: 36rpx;
		text-align: center;
		padding: 20rpx 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.miaoshu {
		font-size: 32rpx;
		text-align: center;
		margin: 20rpx 0 40rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.SpecialPrice {
		font-size: 28rpx;
		text-align: center;
		margin-bottom: 20rpx;
		color: #9b0000;
	}

	.topicBox {
		width: 100%;
		background-color: #fff;
	}

	.topicBoxTilet {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 36rpx;

	}

	.topicListBox {
		width: 100%;
		overflow-x: auto;
		display: flex;
	}

	.topicBoxItem {
		width: 640rpx;
		margin-right: 10rpx;
		padding: 0 15rpx;

		.topicBoxItemTitel {
			height: 80rpx;
			line-height: 80rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;

			.topicPrice {
				font-size: 32rpx;
				color: #8b0000;
				margin-right: 40rpx;
			}

		}

		.topicMs {
			font-size: 28rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
</style>
